.uv-iiif-extension-host.uv-av-extension {
  //   // For the loading animation.
  //   .options-container, .mobileFooterPanel, .waveform, .time-display {
  //     transition: opacity .5s;
  //   }

  //   .player--loading {
  //     .options-container, .mobileFooterPanel {
  //       opacity: 0.5;
  //       pointer-events: none;
  //     }
  //     .time-display, .waveform {
  //       opacity: 0;
  //     }
  //   }

  //   .centerPanel {
  //     .player {
  //       background-color: transparent;
  //       transition: background-color .3s;
  //       position: relative;
  //     }

  //     .player--loading:after {
  //       position: absolute;
  //       content: '';
  //       top: 8px;
  //       bottom: 55px;
  //       left: 8px;
  //       right: 8px;
  //       z-index: 10;
  //       background-repeat: no-repeat;
  //       background-position: 50% 50%;
  //       background-image: url();
  //     }

  //     .content {
  //       .iiif-av-component {
  //         .av-icon.av-icon-play {
  //           background-size: 30px 30px;
  //           &.play {
  //             //<svg xmlns="http://www.w3.org/2000/svg" height="30" width="30">
  //             //    <path d="M8.5 26V4l13 11z" fill="#fff" fill-rule="evenodd"/>
  //             //</svg>
  //             background-image: url("data:image/svg+xml;charset=utf-8,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='30' width='30'%3E%3Cpath d='M8.5 26V4l13 11z' fill='%23fff' fill-rule='evenodd'/%3E%3C/svg%3E");
  //             &:after {
  //               background-image: url("data:image/svg+xml;charset=utf-8,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='30' width='30'%3E%3Cpath d='M8.5 26V4l13 11z' fill='%23fff' fill-rule='evenodd'/%3E%3C/svg%3E");
  //               opacity: 0;
  //               content: '';
  //             }
  //           }

  //           &.pause {
  //             // <svg viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
  //             //   <g fill="#fff" fill-rule="evenodd">
  //             //     <path d="M18 4h6v22h-6zM6 4h6v22H6z"/>
  //             //   </g>
  //             // </svg>
  //             background-image: url("data:image/svg+xml;charset=utf-8,%0A%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff' fill-rule='evenodd'%3E%3Cpath d='M18 4h6v22h-6zM6 4h6v22H6z'/%3E%3C/g%3E%3C/svg%3E");
  //           }
  //         }
  //       }
  //     }
  //   }

  .mobileFooterPanel {
    float: right;
    width: 90px;
    margin-top: -38px;
    height: 5px;

    .options {
      width: 100%;

      .btn {
        &.moreInfo {
          display: none;
        }

        &.download {
          display: block;
          float: left;
        }

        &.share {
          display: block;
          float: left;
        }
      }
    }
  }
}
